<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />

    <title>产品中心-产品详情页</title>
    {include file='commonjs'}
</head>

<body class="page produtc_det">

    <!-- c-nav 开始 -->
    {include file='common_head'}
    <!-- c-nav 结束 -->

    <!-- c-banner 开始 -->
    <div class="c-banner">
        <div class="series">
            <ul class="series-list clearfix">
                <li class="series-list-mbNav">
                    <a href="index.html">首页</a>
                    &gt;
                </li>
                <li class="series-list-mbNav">
                    <a href="news.html">产品中心</a>
                    &gt;
                </li>
                <li class="series-list-mbNav">
                    矿泉直饮系列
                </li>
            </ul>
        </div>
    </div>
    <!-- c-banner 结束 -->

    <!-- pc-slide 开始 -->
    <div class="pc-slide PT-65">
        <div class="view clearfix">
            <div class="swiper-container">
                <div class="swiper-wrapper clearfix">
                    <div class="swiper-slide clearfix">
                        <div class="view-pic">
                            <img src="/static/index/img/page/product_det/net_pic4.png" alt="">
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="view-pic">
                            <img src="/static/index/img/page/product_det/net_pic4.png" alt="">
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="view-pic">
                            <img src="/static/index/img/page/product_det/net_pic4.png" alt="">
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="view-pic">
                            <img src="/static/index/img/page/product_det/net_pic4.png" alt="">
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="view-pic">
                            <img src="/static/index/img/page/product_det/net_pic4.png" alt="">
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="view-pic">
                            <img src="/static/index/img/page/product_det/net_pic4.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="view-det PT-55">
                <p class="view-det-name">矿物质净水器R5 YCZ-JT8-QL50</p>
                <p class="view-det-axName">美国原装进口陶氏纳滤膜 六级过滤 水电分离 自动清洗</p>
                <p class="view-det-num">
                    <span class="vi_ls">零售价：</span><span class="vi_vl">￥6548</span>
                </p>
                <p class="view-det-text">过滤工艺：PP棉滤芯+颗粒活性炭滤芯+ 压缩炭+进口 </p>
                <p class="view-det-text">过滤精度：0.0001μm</p>
                <p class="view-det-text">外形尺寸：360*220*440（mm）</p>
            </div>
        </div>

        <div class="preview_box MB-35">
            <div class="preview">
                <a class="arrow-left" href="#" style="background-image: url('/static/index/img/page/product_det/left.png')"></a>
                <a class="arrow-right" href="#" style="background-image: url('/static/index/img/page/product_det/right.png')"></a>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide active-nav">
                            <img src="/static/index/img/page/product_det/net_pic1.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="/static/index/img/page/product_det/net_pic2.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="/static/index/img/page/product_det/net_pic3.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="/static/index/img/page/product_det/net_pic3.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="/static/index/img/page/product_det/net_pic3.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="/static/index/img/page/product_det/net_pic3.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="net_pic PB-60">
            <p>
                <img src="/static/index/img/page/product_det/net_pic5.png" alt="">
            </p>
        </div>
    </div>
    <!-- pc-slide 结束 -->

    <!-- c-footer 开始 -->
    {include file='common_footer'}
    <!-- c-footer 结束 -->


    <script>
        require(['jquery', 'SMV', 'layer', 'lodash', 'lazyload', 'swiper2'], function($, SMV, layer, _, lazyload, Swiper) {


            var viewSwiper = new Swiper('.view .swiper-container', {
                onSlideChangeStart: function() {
                    updateNavPosition();
                }
            })

            $('.preview .arrow-left').on('click', function(e) {
                e.preventDefault();
                if(viewSwiper.activeIndex == 0) {
                    viewSwiper.swipeTo(viewSwiper.slides.length - 1, 1000);
                    return;
                }
                viewSwiper.swipePrev();
            })
            $('.preview .arrow-right').on('click', function(e) {
                e.preventDefault();
                if(viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
                    viewSwiper.swipeTo(0, 1000);
                    return
                }
                viewSwiper.swipeNext();
            })

            var previewSwiper = new Swiper('.preview .swiper-container', {
                visibilityFullFit: true,
                slidesPerView: 'auto',
                onlyExternal: true,
                onSlideClick: function() {
                    viewSwiper.swipeTo(previewSwiper.clickedSlideIndex);
                }
            })

            function updateNavPosition() {
                $('.preview .active-nav').removeClass('active-nav');
                var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav');
                if(!activeNav.hasClass('swiper-slide-visible')) {
                    if(activeNav.index() > previewSwiper.activeIndex) {
                        var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1;
                        previewSwiper.swipeTo(activeNav.index() - thumbsPerNav);
                    } else {
                        previewSwiper.swipeTo(activeNav.index());
                    }
                }
            }

            // nav
            $(window).scroll( function() {
                var t = $(document).scrollTop();
                if (t > 0) {
                    $(".c-nav").addClass("c_nav-scroll");
                }else {
                    $(".c-nav").removeClass("c_nav-scroll");
                }
            });

            // 留言
            new SMV('form', {
                rules: {
                    onlyPhone:[/^1[34578]\d{9}$/,"手机号码格式有误"]
                },
                fields: {
                    name: {
                        required: "姓名未填写",
                        failHtml: false,
                        rule: "required|disblur",
                        fail: function (messages) {
                            layer.tips(messages, '#name');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    },
                    phone: {
                        required: "号码未填写",
                        failHtml: false,
                        rule: "required|disblur|onlyPhone",
                        fail: function (messages) {
                            layer.tips(messages, '#phone');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    },
                    corp: {
                        required: "公司未填写",
                        failHtml: false,
                        rule: "required|disblur",
                        fail: function (messages) {
                            layer.tips(messages, '#corp');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    },
                    idea: {
                        required: "意见未填写",
                        failHtml: false,
                        rule: "required|disblur",
                        fail: function (messages) {
                            layer.tips(messages, '#idea');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    }
                },
                short: true,
                submit: function(valid, form) {
                    if(valid) {
                        form.submit();
                    }
                }
            })
        })
    </script>
</body>

</html>